<template>
  <div class="AdverseReactions">
    <div class="title">
      <p></p>
      <p>不良事件</p>
    </div>
    <div v-if="state.adverseReactionsObj.id">
      <div class="cardWrap">
        <div class="card">
          <p>报告事件内容</p>
          <p>
            {{ state.adverseReactionsObj.eventContext }}
          </p>
        </div>
        <div class="card">
          <p>报告时间</p>
          <p>{{ state.adverseReactionsObj.reportTime }}</p>
        </div>
        <div class="card">
          <p>发送提醒</p>
          <!-- <textarea class="textarea" cols="6" maxlength="300" placeholder="请输入提醒内容"></textarea> -->
          <a-textarea
            class="textarea"
            v-model:value="state.adverseReactionsObj.remindContext"
            placeholder="请输入提醒内容"
            showCount
            :maxlength="300"
            :disabled="
              state.adverseReactionsObj && state.adverseReactionsObj.status == 0 ? false : true
            "
          />
        </div>
      </div>
      <div class="btn" v-if="state.adverseReactionsObj && state.adverseReactionsObj.status == 0">
        <a-button type="primary" @click="send">发送提醒</a-button>
        <a-button @click="ignore">忽略</a-button>
      </div>
    </div>
    <a-empty v-else class="mt16">
      <template #description>
        <span> 暂无不良事件 </span>
      </template>
    </a-empty>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, createVNode } from 'vue'
import { message, Modal } from 'ant-design-vue'
const props = defineProps(['childProp'])
import { useRoute } from 'vue-router'
import { ExclamationCircleOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue'
const route = useRoute()
const state = reactive({
  textareaValue: '',
  adverseReactionsObj: {}
})
watch(
  props,
  (newValue) => {
    state.adverseReactionsObj = newValue.childProp
  },
  { immediate: true, deep: true }
)
let emit = defineEmits(['sendState', 'ignoreState'])
const send = () => {
  if (state.adverseReactionsObj.remindContext.trim().length == 0) {
    message.error('发送提醒不能为空')
    return false
  }
  let param = {
    id: route.query.id,
    remindContext: state.adverseReactionsObj.remindContext
  }
  emit('sendState', param)
}
const ignore = () => {
  Modal.confirm({
    title: '忽略',
    // class: 'deltip',
    // icon: createVNode(ExclamationCircleOutlined),
    icon: createVNode(ExclamationCircleFilled, {
      //   style: {
      //     color: 'var(--color--danger)'
      //   }
    }),
    content: '确认忽略?',
    okText: '确定',
    okButtonProps: {
      //   danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      let param = {
        id: route.query.id,
        remindContext: state.adverseReactionsObj.remindContext
      }
      emit('ignoreState', param)
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

// const init = id => {
//   console.log(id)
// }

// defineExpose({
//   init
// })
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.mt16 {
  margin-top: 16px;
}
.AdverseReactions {
  .title {
    p {
      font-size: 18px;
      color: #1d2129;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
      &:nth-child(1) {
        width: 3px;
        height: 16px;
        background: #165dff;
        margin-right: 10px;
      }
    }
  }
  .cardWrap {
    margin-top: 4px;
    .card {
      margin-top: 12px;
      font-size: 14px;
      p {
        width: 120px;
        color: #86909c;
        display: inline-block;
        vertical-align: top;
        font-weight: 700;
        &:nth-child(2) {
          width: calc(100% - 120px);
          color: #1d2129;
        }
      }
      .textarea {
        // border: 1px solid #dcdfe6;
        outline: none; /*边线不显示*/
        resize: none; /*禁止拉伸*/
        background: none; /*带点绿*/
        appearance: none;
        width: calc(100% - 150px);
        font-size: 14px;
        color: #1d2129;
        display: inline-block;
        vertical-align: top;
        height: 80px;
      }
    }
  }
  .btn {
    margin-top: 16px;
    :deep(.ant-btn) {
      padding: 0 16px;
      &:nth-child(1) {
        margin-right: 10px;
        background: #165dff;
      }
    }
  }
}
</style>
